<template>
  <div>
    <el-dialog v-bind="dialogProps" :before-close="handleClose" :close-on-click-modal="false"
               :destroy-on-close="true" v-dialogDrag>
      <div @click="basicsShow()" style="cursor:pointer">
        <h3 style="color:#009688;"><i :class="classFont" style="margin-right: 5px;"></i>单据信息</h3>
      </div>
      <div style="width:100%;height:2px;background:#009688;margin-bottom: 10px;"></div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm"
               size="small">

        <el-row :gutter="16" justify="start" v-show="formShow">
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="单位:" prop="ssdwbm">
              <el-select v-model="ruleForm.ssdwbm" placeholder="请选择单位" clearable style="width: 100%"
                         disabled>
                <el-option v-for="item in zxoptions" :key="item.value" :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="入库单号:" prop="id">
              <el-input v-model="ruleForm.id" placeholder="请输入入库单号" clearable disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="库房名称:" prop="ckbm">
              <el-select v-model="ruleForm.ckbm" placeholder="请选择库房名称" clearable style="width: 100%"
                         disabled>
                <el-option v-for="item in sskfOptions" :key="item.value" :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="入库日期:" prop="djrq">
              <el-date-picker v-model="ruleForm.djrq" type="datetime" style="width:100%" clearable
                              disabled placeholder="请选择入库日期">
              </el-date-picker>
            </el-form-item>
          </el-col>


          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="入库操作人:" prop="cjr">
              <el-input v-model="ruleForm.cjr" placeholder="请输入入库操作人" clearable disabled></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="操作时间:" prop="cjTime">
              <el-date-picker v-model="ruleForm.cjTime" type="datetime" style="width:100%" clearable
                              placeholder="请选择操作时间" disabled>
              </el-date-picker>
            </el-form-item>
          </el-col>

        </el-row>
        <div>
          <h3 style="color:#009688;">设备信息</h3>
        </div>
        <div style="width:100%;height:2px;background:#009688;margin-bottom: 10px;"></div>

        <vxe-table border stripe ref="selectedEquip" height="300" :data="list.data">
          <vxe-column type="seq" title="序号" width="60" align="center"></vxe-column>
          <vxe-column field="sbmc" title="设备名称" align="center" minWidth="150"></vxe-column>
          <vxe-column field="ccbm" title="出厂编码" align="center" minWidth="200"></vxe-column>
          <vxe-column field="sblxmc" title="设备类型" align="center" minWidth="150"></vxe-column>
          <vxe-column field="pt" title="PT" align="center" minWidth="150"></vxe-column>
          <vxe-column field="ct" title="CT" align="center" minWidth="150"></vxe-column>
          <vxe-column field="sbgg" title="规格" align="center" minWidth="150"></vxe-column>
          <vxe-column field="xh" title="型号" align="center" minWidth="150"></vxe-column>
          <vxe-column field="cjmc" title="厂家" align="center" minWidth="150"></vxe-column>
          <vxe-column field="sbztmc" title="设备状态" align="center" minWidth="150"></vxe-column>
        </vxe-table>

        <div>
          <h3 style="color:#009688;">审核信息</h3>
        </div>
        <div style="width:100%;height:3px;background:#009688;margin-bottom: 10px;"></div>
        <el-row :gutter="16" justify="start">
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="审核结论:" prop="djshzt">
              <el-select v-model="ruleForm.djshzt" placeholder="请选择审核结论" clearable
                         style="width: 100%" @change="djshztChange">
                <el-option label="通过" :value="'100'"></el-option>
                <el-option label="不通过" :value="'20'"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="审核人:" prop="shPerson">
              <el-input v-model="ruleForm.shPerson" placeholder="请输入审核人" clearable disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="审核时间:" prop="shTime">
              <el-date-picker v-model="ruleForm.shTime" type="datetime" style="width:100%" clearable
                              disabled>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="审核意见:">
              <el-input v-model="ruleForm.shyj" placeholder="请输入审核意见" clearable type="textarea">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

      <span slot="footer" class="dialog-footer" v-if="footerVisible">
                <el-button type="primary" @click="handleSubmit()" :size="size"
                           icon="fa fa-save (alias)">确定</el-button>
                <el-button @click="handleCancel()" :size="size" icon="fa fa-times (alias)">取消</el-button>

            </span>
    </el-dialog>
    <selectEquipment ref="selectEquipment"></selectEquipment>
  </div>
</template>
<script>
import {auditEquipmentFrom} from "../model/auditEquipmentFrom";
import selectEquipment from "./selectEquipment";
import {godownEntryApi} from "@/api/equip/godownEntryApi";
import {warehouseManagement} from '@/api/equip/warehouseManagement.js'
import {getInfo} from "@/api/login";
import {listDept} from "@/api/system/dept";
import moment from "moment";

export default {
  components: {selectEquipment},
  data() {
    return {
      dialogProps: {
        visible: false,
        title: "审核",
        width: "70%",
        top: "5px",
      },
      footerVisible: true,
      size: "medium",
      ruleForm: auditEquipmentFrom.FormData,
      rules: auditEquipmentFrom.rules,
      disabledForm: true,
      zxoptions: [],
      sskfOptions: [],
      xsnrShow: true,
      list: {
        data: []
      },
      row: {},
      classFont: 'fa fa-caret-down',
      formShow: true,
    };
  },
  methods: {
    showDialog(isEdit, row, isDisabled) {
      console.log(isEdit, row, isDisabled, 1111);
      if (isEdit) {
        this.initData(row);
      }
      this.dialogProps.visible = true;
      this.getOptionData_gldw()
    },
    basicsShow() {

      if (this.formShow) {
        this.formShow = false
        this.classFont = 'fa fa-caret-right'

      } else {
        this.formShow = true
        this.classFont = 'fa fa-caret-down'

      }

    },

    //选择设备弹窗
    equipmentModel() {
      this.$refs.selectEquipment.showDialog()

    },


    //编辑渲染
    initData(data) {
      godownEntryApi.getDjData(data.id).then(res => {
        this.ruleForm = res.data[0]
        this.ruleForm.djshzt = ''
        getInfo().then(res => {
          this.ruleForm.shPerson = res.user.nickName
          this.ruleForm.shTime = moment().format("YYYY-MM-DD HH:mm:ss")
        })
        warehouseManagement.getKfByGldw(res.data[0].ssdwbm).then(res => {
          this.sskfOptions = []
          res.data.forEach((item) => {
            this.sskfOptions.push({
              label: item.kfName, value: item.id
            })
          })
        }).catch(err => {
        })
      })
      let queryParams = {
        column: '',
        entity: {
          id: data.id
        },
        order: '',
        pageNo: 1,
        pageSize: 10,
        paramsMap: {}
      }
      godownEntryApi.getDjEquipList(queryParams).then(res => {
        this.list.data = res.data.records
      })
    },

    //确定
    handleSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          godownEntryApi.updateDjsh(this.ruleForm).then(res => {
            this.dialogProps.visible = false;
            this.$emit("closeShEvent");
          })
        } else {
          return false;
        }
      });

    },
    //取消
    handleCancel() {
      this.dialogProps.visible = false;
      this.$emit("closeShEvent");
    },
    //确定关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.handleCancel()
          this.dialogProps.visible = false;
        })
        .catch((_) => {
        });
    },
    getOptionData_gldw() {//获取管理单位：字典表
      getInfo().then(res => {
        let params = {
          deptId: res.user.dept.deptId,
          parentId: res.user.dept.parentId
        }
        listDept(params).then(res => {
          let optionList = [
            {label: '请选择', value: ''}
          ]
          res.data.forEach((item) => {
            optionList.push({label: item.deptName, value: item.deptId})
          })
          this.zxoptions = optionList
        })
      })
    },
    djshztChange(value) {
      if (value === '100') {
        this.ruleForm.djshztmc = '通过';
      } else {
        this.ruleForm.djshztmc = '不通过';
      }
    }
  },
};

</script>
<style>
.el-dialog__footer {
  width: 100%;
  border-top: 1px solid #e8e8e8;
}
</style>
